<template>
  <view class="content">
    <view class="maskStatus" :class="{ 'tabs-fixed': isShowSticky }" v-if="isShowSticky"></view>
    <mescroll-uni @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @init="mescrollInit" @topclick="topClick">
      <view class="statusH"></view>
      <view class="logo"></view>
      <view class="gridNav">
        <view class="gridItems clearfix">
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(9).png"></image>
            <text class="text">党章学习</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(11).png"></image>
            <text class="text">积分排名</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(12).png"></image>
            <text class="text">领导信箱</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(13).png"></image>
            <text class="text">网上调查</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(14).png"></image>
            <text class="text">意见征集</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(8).png"></image>
            <text class="text">党史人物</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(1).png"></image>
            <text class="text">在线考试</text>
          </view>
          <view class="gridItem">
            <image class="gridIcon" src="/static/img/nav%20(10).png"></image>
            <text class="text">更多应用</text>
          </view>
        </view>
      </view>
      <view class="best-notice">
        <view class="noticeTitle">
          <view class="noticeBorder"><image class="notice-icon" src="../../static/img/notice.png"></image></view>
        </view>
        <view class="noticeItems">
          <view class="swiper">
            <view class="swiper-scroll" :animation="animationData">
              <view>
                <view class="swiper-item">
                  <b>·</b>
                  河北省人民政府办公厅关于省政府部...
                </view>
                <view class="swiper-item">
                  <b>·</b>
                  河北省政务服务网站工作年度报表河北省政务服务网站工作年度报表
                </view>
              </view>
              <view>
                <view class="swiper-item">
                  <b>·</b>
                  河北省人民政府办公厅关于省政府部...
                </view>
                <view class="swiper-item">
                  <b>·</b>
                  河北省政务服务网站工作年度报表
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="swipercover"></view> -->
        </view>
        <view class="noticeIcon"><i class="iconfont el-icon-extend-qianjin"></i></view>
      </view>
      <view class="main">
        <view class="QS-tabs-box" id="tabInList">
          <QSTabs ref="tabs" :current="current" animationMode="line2" :tabs="tabs" activeColor="#000" lineColor="#F1413B" minWidth="187.5" @change="change" />
        </view>
        <view class="swiperUl">
          <view class="swiperLi" v-for="(item, index) in dataList" :key="index">
            <view class="scroll-item-image-box"><image src="/static/img/img.jpg" mode="aspectFill" class="scroll-item-image"></image></view>
            <view class="scroll-item-text-box">
              <view class="box-h">{{ item.name }}</view>
              <view class="box-span">
                <text class="box-date">{{ item.createTime | time }}</text>
                <text class="iconfont el-icon-extend-liulanliang"></text>
                <text class="box-see">{{ item.readNum }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
var EARTH_RADIUS = 6378137.0;    //单位M
var PI = Math.PI;
export default {
  data() {
    return {
      tabId: '',
      mescroll: null, //mescroll实例对象
      isShowSticky: false,
      current: 0,
      navTop: null,
      scrollHeight: 0,
      height: 0, //.lis高度（滚动框高度）
      dataList: [],
      animationData: {},
      upOption: {
        onScroll: true, // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量,默认10
          empty: {
            use: true,
            tip: '暂无相关数据'
          }
        }
      },
      tabs: []
    };
  },
  components: { QSTabs, MescrollUni },
  onLoad() {
    this.getMenu();
  },
  mounted() {
    this.prizeScroll();
  },
  computed: {},
  methods: {
    getRad(d) {
      return (d * PI) / 180.0;
    },
    getFlatternDistance(lat1, lng1, lat2, lng2) {
      var f = this.getRad((lat1 + lat2) / 2);
      var g = this.getRad((lat1 - lat2) / 2);
      var l = this.getRad((lng1 - lng2) / 2);

      var sg = Math.sin(g);
      var sl = Math.sin(l);
      var sf = Math.sin(f);

      var s, c, w, r, d, h1, h2;
      var a = EARTH_RADIUS;
      var fl = 1 / 298.257;

      sg = sg * sg;
      sl = sl * sl;
      sf = sf * sf;

      s = sg * (1 - sl) + (1 - sf) * sl;
      c = (1 - sg) * (1 - sl) + sf * sl;

      w = Math.atan(Math.sqrt(s / c));
      r = Math.sqrt(s * c) / w;
      d = 2 * w * a;
      h1 = (3 * r - 1) / 2 / c;
      h2 = (3 * r + 1) / 2 / s;
      console.log(d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg)))
      return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    },
    getMenu() {
      let _this = this
      uni.getLocation({
        type: 'wgs84',
        success: function(res) {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          // let longitude = res.longitude
          // uni.showToast({
          //     title: longitude,
          //     duration: 2000
          // });114.038168,32.138504
          _this.getFlatternDistance(res.latitude,res.longitude,32.138504, 114.038168)
          
        }
      });
      this.$api.getMenu().then(res => {
        if (res && res.code === '200') {
          let data = res.data;
          this.tabs = data;
          // console.log(this.tabs)
          this.tabId = this.tabs[0].id;
          setTimeout(() => {
            this.$refs.tabs.init();
          }, 0);
        }
      });
    },
    getHeight(Class) {
      let query = uni.createSelectorQuery().in(this);
      query
        .selectAll(Class)
        .boundingClientRect(data => {
          this.height = data[0].height;
        })
        .exec();
    },
    prizeScroll() {
      let speed = 50;
      let animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'linear',
        delay: 1000
      });
      this.animation = animation;
      this.getHeight('.swiper-scroll');
      let h = 0;
      let isTop = true;
      setInterval(() => {
        h = isTop ? -this.height / 2 : 0;
        animation.translateY(h).step();
        this.animationData = animation.export();
        isTop = !isTop;
      }, 3000);
    },
    change(index) {
      console.log(index);
      this.current = index;
      this.tabId = this.tabs[index].id;
      // 记录前一个菜单的数据
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*下拉刷新的回调 */
    downCallback(mescroll) {
      this.dataList = [];
      mescroll.resetUpScroll(); // 下拉刷新重置数据
    },
    upCallback(mescroll) {
      //联网加载数据
      let pageNum = mescroll.num; // 页码, 默认从1开始
      let pageSize = mescroll.size; // 页长, 默认每页10条
      // debugger
      let params = {
        offset: pageNum - 1,
        columnId: this.tabId,
        limit: pageSize
      };
      this.$api.getAticle(params).then(res => {
        if (res && res.code === '200') {
          let data = res.data;
          let curPageData = data.items;
          mescroll.endBySize(curPageData.length, data.total);
          // mescroll.endSuccess()
          this.dataList = this.dataList.concat(curPageData);
        } else {
          mescroll.endErr();
        }
      });
    },
    setNavTop() {
      let view = uni
        .createSelectorQuery()
        .in(this)
        .select('#tabInList');
      console.log(view);
      view
        .boundingClientRect(data => {
          // console.log('tabInList基本信息 = ' + JSON.stringify(data));
          this.navTop = data.top; // 到屏幕顶部的距离
        })
        .exec();
    },
    // 滚动事件 (需在up配置onScroll:true才生效)
    scroll(mescroll) {
      // console.log('滚动条位置 = ' + mescroll.getScrollTop() + ', navTop = ' + this.navTop);
      // 菜单悬浮的原理: 监听滚动条的位置大于某个值时,控制顶部菜单的显示和隐藏
      if (mescroll.getScrollTop() >= this.navTop - uni.getSystemInfoSync().statusBarHeight) {
        this.isShowSticky = true; // 显示悬浮菜单
      } else {
        this.isShowSticky = false; // 隐藏悬浮菜单
      }
    },
    // 点击回到顶部按钮时,先隐藏悬浮菜单,避免闪动
    topClick() {
      this.isShowSticky = false;
    }
  },
  filters: {
    time(time) {
      let dt = time;
      if (!dt || isNaN(parseInt(dt))) return '';
      let date = new Date(parseInt(dt));
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? '0' + MM : MM;
      let d = date.getDate();
      d = d < 10 ? '0' + d : d;
      return y + '-' + MM + '-' + d;
    }
  }
};
</script>

<style scoped>
page {
  height: 100%;
}
.content {
  background: url('~@/static/img/bg-body.jpg') no-repeat;
  background-size: 100% auto;
  height: 100%;
}
.statusH {
  height: var(--status-bar-height);
}
.logo {
  height: 192rpx;
}
.gridNav {
  width: 730rpx;
  height: 332rpx;
  padding: 27rpx 0rpx;
  border-radius: 15rpx;
  box-sizing: border-box;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
  background: #fff;
  margin: 0px auto 16rpx;
  overflow: hidden;
}
.gridItem {
  float: left;
  width: 25%;
  margin-bottom: 43rpx;
  text-align: center;
  font-size: 26rpx;
  color: #333;
}
.gridIcon {
  width: 75rpx;
  height: 75rpx;
}
.text {
  display: block;
  text-align: center;
}
.best-notice {
  display: flex;
  margin-bottom: 16rpx;
  /* padding: 0 30rpx; */
  height: 122rpx;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
}
.noticeTitle {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 123rpx;
  width: 123rpx;
}
.noticeBorder {
  width: 123rpx;
  height: 72rpx;
  text-align: center;
  border-right: 1px solid #f4f4f4;
}
.notice-icon {
  width: 74rpx;
  height: 72rpx;
}
.noticeItems {
  position: relative;
  flex: 1;
  height: 100%;
  padding: 20rpx 18rpx;
  box-sizing: border-box;
  overflow: hidden;
}
.swiper {
  height: 100%;
  overflow: hidden;
}
.swipercover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.noticeItems .swiper-item {
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
}
.noticeItems .swiper-item b {
  display: inline-block;
  padding-right: 10rpx;
  font-size: 28rpx;
  color: #f93839;
}
.noticeIcon {
  display: flex;
  width: 86rpx;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.main {
  height: 100%;
  background: #fff;
}
.QS-tabs-box {
  width: 100%;
  position: sticky;
  top: var(--status-bar-height);
  z-index: 10;
  background-color: white;
  border-bottom: 1rpx solid #f4f4f4;
}
.main .swiper {
  height: 100%;
}
.swiperUl {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 18rpx;
  box-sizing: border-box;
}
.swiperLi {
  display: flex;
  flex-direction: row;
  padding-bottom: 12rpx;
  margin-bottom: 21rpx;
  border-bottom: 1px solid #f4f4f4;
}
.scroll-item-image-box {
  margin-right: 20rpx;
  flex-grow: 0;
}
.scroll-item-text-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  font-weight: bold;
}
.scroll-item-image {
  border-radius: 4rpx;
  width: 180rpx;
  height: 150rpx;
}
.box-h {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 25rpx;
  line-height: 45rpx;
  min-height: 90rpx;
  font-size: 30rpx;
  color: #303030;
}
.box-span {
  font-weight: normal;
  font-size: 24rpx;
  color: #c0c0c0;
}
.box-date {
  padding-right: 38rpx;
}
.el-icon-extend-liulanliang {
  position: relative;
  top: 5rpx;
  padding-right: 13rpx;
}
.maskStatus {
  background: #f2f2f2;
  width: 100%;
  height: var(--status-bar-height);
}
.maskStatus.tabs-fixed {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.mescroll-upwarp {
  background: #fff;
}
</style>
